import { BottomStyle, FlexRowBox } from './style';
import { Button, Modal, Toast } from 'antd-mobile';
import { useState } from 'react';
import ShopingCart from './ShopingCart';
import { connect } from 'umi';
import type { ShopingCartState } from '@/models/shopingCart';
import type { AppStateType } from '@/models/app';
import { setPendingOrder } from '@/service';
import OrderList from './OrderList';

const { alert } = Modal;

const Bottom = (props: any) => {
  const [shopingCartSwitch, setShopingCartSwitch] = useState(false);
  const [seeOrderSwitch, setSeeOrderSwitch] = useState(false);

  return (
    <BottomStyle>
      <FlexRowBox className="bottom-left">
        <img
          src="https://res.lexiangpingou.cn/images/826/2021/05/Rs3KVI1XfEnIIkpivRSSkvISRNOkvI.png"
          className=""
          alt="菜单"
          onClick={() => {
            setShopingCartSwitch(!shopingCartSwitch);
          }}
        />

        {props.totalNum > 0 && (
          <div className="total-num">{props.totalNum}</div>
        )}

        <FlexRowBox className="total-price">
          <span className="rmb">¥</span>
          <span className="price">{props.totalPrice.toFixed(2)}</span>
        </FlexRowBox>
      </FlexRowBox>

      <FlexRowBox className="bottom-right">
        <img
          src="https://res.lexiangpingou.cn/images/826/2021/05/uQl5ktzKaPk7X34ArX7xRTARt7xPkD.png"
          alt=""
          className="people"
          onClick={() => {
            setSeeOrderSwitch(!seeOrderSwitch);
          }}
        />
        <Button
          className="submit-order"
          onClick={() => {
            alert('提交订单', '提交后将无法修改，请仔细核对（购物车）', [
              {
                text: '确认',
                onPress: () => {
                  setPendingOrder({
                    ...props.config,
                    ...props.shopingcart,
                  }).then((res) => {
                    if (res.status === 1) {
                      props.putUpOrder({
                        ...props.config,
                        ...props.shopingcart,
                      });
                      props.cleanShopingCart();
                      Toast.info('点餐成功', 2);
                    } else {
                      Toast.info('点餐失败', 2);
                    }
                    console.log(res);
                  });
                },
              },
              {
                text: '取消',
                onPress: () => {
                  console.log('aa');
                },
              },
            ]);
          }}
        >
          提交
        </Button>
      </FlexRowBox>

      <Modal
        visible={shopingCartSwitch}
        style={{
          backgroundColor: 'white',
          borderRadius: '15px 15px 0 0',
          position: 'absolute',
          bottom: '60px',
        }}
        popup={true}
        transparent={true}
        onClose={() => {
          setShopingCartSwitch(false);
        }}
        closable={false}
        animationType="slide-up"
      >
        <ShopingCart setShopingCartSwitch={setShopingCartSwitch} />
      </Modal>

      <Modal
        visible={seeOrderSwitch}
        style={{
          backgroundColor: 'white',
          borderRadius: '15px 15px 0 0',
        }}
        popup={true}
        transparent={true}
        onClose={() => {
          setSeeOrderSwitch(false);
        }}
        closable={true}
        animationType="slide-up"
        title="已下单"
      >
        {seeOrderSwitch && <OrderList config={props.config} />}
      </Modal>
    </BottomStyle>
  );
};

export default connect(
  ({
    shopingcart,
    app,
  }: {
    shopingcart: ShopingCartState;
    app: AppStateType;
  }) => {
    return {
      totalPrice: shopingcart.totalPrice,
      totalNum: shopingcart.totalNum,
      shopingcart,
      config: app,
    };
  },
  (dispatch) => {
    return {
      putUpOrder: (params: any) => {
        console.log(params);
        dispatch({
          type: 'order/putUpOrder',
          data: params,
        });
      },
      cleanShopingCart: () => {
        dispatch({
          type: 'shopingcart/cleanShopingCart',
          data: {
            goodsList: [],
            totalNum: 0,
            totalPrice: 0,
          },
        });
      },
    };
  },
)(Bottom);
